<template>
  <van-action-sheet
    :show="show"
    @update:show="emit('update:show', $event)"
    :closeable="false"
    :close-on-popstate="false"
    :before-close="onClose"
    title="选择支付方式"
  >
    <div class="pay-type">
      <p class="amount">￥{{ actualPayment.toFixed(2) }}</p>
      <van-cell-group>
        <van-cell title="微信支付" @click="paymentMethod = 0">
          <template #icon><cp-icon name="consult-wechat" /></template>
          <template #extra
            ><van-checkbox :checked="paymentMethod === 0"
          /></template>
        </van-cell>
        <van-cell title="支付宝支付" @click="paymentMethod = 1">
          <template #icon><cp-icon name="consult-alipay" /></template>
          <template #extra
            ><van-checkbox :checked="paymentMethod === 1"
          /></template>
        </van-cell>
      </van-cell-group>
      <div class="btn">
        <van-button type="primary" @click="pay" round block
          >立即支付</van-button
        >
      </div>
    </div>
  </van-action-sheet>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getConsultOrderPayUrl } from '@/services/consult'
import { showToast } from 'vant'
const props = defineProps<{
  show: boolean
  actualPayment: number
  orderId: string
  onClose?: () => void
}>()
// const emit = defineEmits<{
//   (e: 'update:show', val: boolean): void
// }>()
const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
}>()

const paymentMethod = ref<0 | 1>()
const pay = async () => {
  //TODO 支付接口
  if (paymentMethod.value === undefined) return showToast('请选择支付方式')
  const res = await getConsultOrderPayUrl({
    orderId: props.orderId,
    paymentMethod: paymentMethod.value,
    payCallback: 'http://127.0.0.1:5173/room'
  })
  window.location.href = res.data.payUrl
}
</script>

<style scoped></style>
